<template>
  <div class="box">
    <header><van-nav-bar title="个人中心" left-arrow bind:click-left="onClickLeft" /></header>
    <div class="content">
      <!-- 用户信息 -->
      <div class="userInfo">
        <!-- 未登录时显示 -->
        <div class="notLogin" v-if="!login_state">
          <p>Hi,欢迎来到花礼网</p>
          <!-- 跳转至登录 -->
          <van-button round type="info" id="toLogin" @click="$router.push('/login')">登录/注册</van-button>
        </div>
        <div class="hasLogin" v-else>
          <div @click="$router.push('/editUser')" class="user_avatar">
            <img :src="avatar">
          </div>
          <div>
            <p class="user_name">{{user_name}}</p>
            <p class="vip"><span class="iconfont icon-sketch"></span>注册会员</p>
          </div>
        </div>
      </div>
      <!-- 订单栏 -->
      <div class="orderNav userNav">
        <div class="orderNavTop">
          <div class="orderNavTitle">我的订单</div>
          <!-- 查看所有订单 -->
          <div class="orderNavAll">
            全部订单
            <van-icon name="arrow" />
          </div>
        </div>
        <ul class="orderMenu">
          <li>
            <img src="https://img02.hua.com/m/member/center/myinfo_pendingpay.png" alt="" />
            <p>代付款</p>
          </li>
          <li>
            <img src="https://img02.hua.com/m/member/center/myinfo_distribution.png" alt="" />
            <p>今日配送</p>
          </li>
          <li>
            <img src="https://img02.hua.com/m/member/center/myinfo_evaluation.png" alt="" />
            <p>待评价</p>
          </li>
        </ul>
      </div>
      <!-- 菜单栏1 -->
      <div class="menu1 userNav">
        <ul class="menu1-list1 menuList">
          <li>
            <span class="iconfont icon-youhuijuan"></span>
            <p>优惠券</p>
          </li>
          <li>
            <span class="iconfont icon-quanyikajuan"></span>
            <p>权益卡</p>
          </li>
          <li>
            <span class="iconfont icon-yue"></span>
            <p>余额</p>
          </li>
          <li>
            <span class="iconfont icon-shouji"></span>
            <p>会员积分</p>
          </li>
        </ul>
        <ul class="menu1-list2 menuList">
          <li @click="$router.push('/addressList')">
            <span class="iconfont icon-dizhi"></span>
            <p>收货地址</p>
          </li>
          <li>
            <span class="iconfont icon-clock"></span>
            <p>生日纪念提醒</p>
          </li>
          <li>
            <span class="iconfont icon-shoucang"></span>
            <p>我的收藏</p>
          </li>
          <li @click="$router.push('/history')">
            <span class="iconfont icon-jilu"></span>
            <p>浏览记录</p>
          </li>
        </ul>
      </div>
      <!-- 菜单栏2 -->
      <div class="menu2 userNav">
        <ul class="menu2-list menuList">
          <li>
            <span class="iconfont icon-kefu"></span>
            <p>联系客服</p>
          </li>
          <li>
            <span class="iconfont icon-bangzhu"></span>
            <p>帮助中心</p>
          </li>
          <li>
            <span class="iconfont icon-guanyu"></span>
            <p>关于礼花</p>
          </li>
          <li>
            <router-link to="/userSet">
              <span class="iconfont icon-set"></span>
              <p>设置</p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapState, mapMutations } from 'vuex'
import * as types from '@/store/mutation.types'
import { NavBar, Grid, Button, Icon } from 'vant'
Vue.use(NavBar) // 注册NavBar组件
Vue.use(Grid) // 注册Grid组件
Vue.use(Button) // 注册Button组件
Vue.use(Icon) // 注册Icon组件
export default {
  data () {
    return {
      user_name: '18681262803',
      avatar: 'https://img02.hua.com/pc/assets/img/avatar_default_05.jpg'
    }
  },
  computed: {
    ...mapState({
      login_state: ({ users }) => users.login_state
    })
  },
  methods: {
    ...mapMutations('users', [types.CHANGE_LOGIN_STATE])
  },
  mounted () {
    console.log(this.login_state)
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.footer {
  @include rect(100%, 0.5rem);
  @include background-color(#fff);
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li {
      @include flex(); // flex: 1;
      @include rect(auto, 100%);
      // 水平垂直居中
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();
      &.router-link-exact-active,
      .router-link-active {
        @include color(#ff734c);
      }
      span {
        @include font-size(22px);
      }
      p {
        @include font-size(12px);
      }
    }
  }
}
.content {
  background: url('https://img02.hua.com/m/member/center/backgroundv3.png') center 0 no-repeat;
  background-size: 100% auto;
  background-color: #e9ecf0;
}

.userInfo {
  height: 1.12rem;
  padding-top: 1px;
}
.userInfo p {
  color: #fff;
  text-align: center;
  font-size: 0.14rem;
}
.notLogin {
  margin-top: 0.245rem;
}
.hasLogin {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .user_avatar {
    display: block;
    width: 20%;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .vip {
    height: 16px;
    background-color: #ff5500;
    line-height: 16px;
    font-size: 13px;
    border-radius: 8px;
  }
}
#toLogin {
  display: block;
  border: none;
  color: #000;
  width: 1.26rem;
  height: 0.36rem;
  margin: 0.08rem auto 0;
  text-align: center;
  background-color: #fff;
  text-align: center;
  line-height: 0.36rem;
}

.userNav {
  width: 3.59rem;
  background-color: #fff;
  border-radius: 0.04rem;
  margin: 0 auto 0.08rem;
}
.orderNavTop {
  display: flex;
  padding: 0 0.16rem;
  align-items: center;
  height: 0.44rem;
  border-bottom: 0.01rem #e9ecf0 solid;
}
.orderNavTitle {
  flex: 1;
  font-size: 0.16rem;
}
.orderNavAll {
  display: flex;
  align-items: center;
}
.orderMenu {
  display: flex;
  height: 0.73rem;
  align-items: center;
  font-size: 0.13rem;
}
.orderMenu li {
  flex: 1;
  text-align: center;
}
.orderMenu li img {
  width: 0.32rem;
}

.menuList {
  display: flex;
  font-size: 0.13rem;
}
.menuList li {
  flex: 1;
  text-align: center;
  height: 0.9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 0.01rem #e9ecf0 solid;
}
.menuList li span {
  font-size: 0.2rem;
}
</style>
